<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="cu-form-group">
			<view class="title">选择银行</view>
			<picker @change="bankChange" :value="index" :range="bankList" range-key="bankName">
				<view class="picker">
					<view class="flex justify-end align-center" v-if="index > -1">
						<image :src="`/static/images/bank/${bankList[index].bankCode}.png`"></image>
						<view class="margin-left-xs">{{bankList[index].bankName}}</view>
					</view>
					<view v-else>
						请选择
					</view>
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">银行卡号</view>
			<input type="text" placeholder="银行卡号" v-model="bankData.bank_card_no"/>
		</view>
		<view class="cu-form-group">
			<view class="title">卡类型</view>
			<picker @change="typeChange" :value="typeindex" :range="typeList" range-key="name">
				<view class="picker">
					<view class="flex justify-end align-center" v-if="typeindex > -1">
						<view class="margin-left-xs">{{typeList[typeindex].name}}</view>
					</view>
					<view v-else>
						请选择
					</view>
				</view>
			</picker>
		</view>

		<view class="cu-form-group" v-if="typeindex == 1">
			<view class="title">有效日期</view>
			<input type="text" placeholder="有效日期" v-model="bankData.expire_date"/>
		</view>
		<view class="cu-form-group" v-if="typeindex == 1">
			<view class="title">CCV</view>
			<input type="text" placeholder="CCV" v-model="bankData.cvv"/>
		</view>
		<view class="cu-form-group">
			<view class="title">身份证号</view>
			<input type="text" placeholder="身份证号" v-model="bankData.id_no"/>
		</view>
		<view class="cu-form-group">
			<view class="title">持卡人姓名</view>
			<input type="text" maxlength="4" placeholder="持卡人姓名" v-model="bankData.payer_name"/>
		</view>
		<view class="cu-form-group">
			<view class="title">银行预留手机号</view>
			<input type="number" maxlength="11" placeholder="银行预留手机号" v-model="bankData.mobile_no"/>
		</view>
		<view class="cu-form-group">
			<view class="title">输入验证码</view>
			<input type="number" maxlength="11" placeholder="验证码" v-model="bankData.sms_code"/>
			<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="sendMessage" style="font-size: 10px;width: 90px;">
			  {{ countdown == 0 ? '获取验证码' : countdown + 'S'}}
			</button>
		</view>
		<view class="padding-bj flex flex-direction margin-top">
			<button @tap="confirm" class="cu-btn wanl-bg-orange lg">完成</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankData: {
					payer_name: '',
					id_no: '',
					bank_card_no: '',
					mobile_no: '',
					expire_date: '',
					cvv: '',
					Method: 'signSms',
					bank_code: '',
					bank_name: '',
					sms_code: '',
					
					
					username: '',
					mobile: '',
					captcha: '',
					bankCode: '',
					bankName: '',
					cardCode: ''
				},
				mch_order_no: '',
				countdown: 0,
				cTimer: null,
				event: '',
				disabled: false,
				index: -1,
				typeindex: 0,
				typeList: [{
					type: 1, name: '储蓄卡',
				}, {
					type: 2, name: '信用卡'
				}],
				bankList: [
					// {bankCode: 'ALIPAY', bankName: '支付宝账户'},
					// {bankCode: 'WECHAT', bankName: '微信账户'},
					{bankCode: 'ICBC', bankName: '工商银行'},
					//{bankCode: 'ABC', bankName: '农业银行'},
					{bankCode: 'PSBC', bankName: '邮储银行'},
					{bankCode: 'CCB', bankName: '建设银行'},
					{bankCode: 'CMB', bankName: '招商银行'},
					//{bankCode: 'BOC', bankName: '中国银行'},
					{bankCode: 'COMM', bankName: '交通银行'},
					{bankCode: 'SPDB', bankName: '浦发银行'},
					{bankCode: 'GDB', bankName: '广发银行'},
					{bankCode: 'CMBC', bankName: '民生银行'},
					//{bankCode: 'PAB', bankName: '平安银行'},
					{bankCode: 'CEB', bankName: '光大银行'},
					//{bankCode: 'CIB', bankName: '兴业银行'},
					{bankCode: 'CITIC', bankName: '中信银行'}
				]
			}
		},
		methods: {
			// 后续版本添加第三方API接口，自动获取银行，验证银行卡三要素
			confirm(){
				let data = this.bankData;
				// if(!data.bank_code){
				// 	this.$wanlshop.msg('请选择银行');
				// 	return;
				// }
				// if(!data.bank_card_no){
				// 	this.$wanlshop.msg('请填写银行卡号');
				// 	return;
				// }
				// if(!data.id_no){
				// 	this.$wanlshop.msg('请填写身份证号');
				// 	return;
				// }
				// if(!data.payer_name){
				// 	this.$wanlshop.msg('请填写持卡人姓名');
				// 	return;
				// }
				// // if(!data.expire_date){
				// // 	this.$wanlshop.msg('请填写卡有效期');
				// // 	return;
				// // }
				// // if(!data.cvv){
				// // 	this.$wanlshop.msg('请填写卡识别码');
				// // 	return;
				// // }
				// if (!data.mobile_no) {
				// 	this.$wanlshop.msg('请填写手机号码');
				// 		return false
				// }
				if (!data.sms_code) {
					this.$wanlshop.msg('请填写验证码');
						return false
				}

				// var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				// if(!data.mobile || !myreg.test(data.mobile)){
				// 	this.$wanlshop.msg('请填写正确手机号');
				// 	return;
				// }
				
				uni.request({
					url: '/wanlshop/Joinpay/smsSign', 
					method: 'POST',
					data:{
						mch_order_no: this.mch_order_no,
						sms_code: data.sms_code,
					// 	payer_name: data.payer_name,  
					// 	id_no: data.id_no,
					// 	bank_card_no: data.bank_card_no,
					// 	mobile_no: data.mobile_no,
					// 	expire_date: data.expire_date,
					// 	cvv: data.cvv,
					// 	Method: 'signSms',
					// 	bank_code: data.bank_code,
					// 	bank_name: data.bank_name,
					},
					success: res => {
						this.$wanlshop.msg('绑卡成功');
						this.$wanlshop.prePage().refreshList(data);
						this.$wanlshop.back(1);
					},
				})

			},
			bankChange(e) {
				this.index = e.detail.value;
				this.bankData.bank_code = this.bankList[e.detail.value].bankCode;
				this.bankData.bank_name = this.bankList[e.detail.value].bankName;
			},
			typeChange(e) {
				this.typeindex = e.detail.value;
				// this.type_id = this.typeList[e.detail.value].id;
				// this.type_name = this.typeList[e.detail.value].name;
			},
			sendMessage() {
				//  发送验证码
				// uni.request({
				// 	url: '/wanlshop/Joinpay/paySms',
				// 	method: 'POST',
				// 	data: {
				// 			mch_order_no: res.data.out_trade_no,  
				// 			order_amount: this.price,
				// 			bank_card_no: data.bank_card_no,
				// 			mobile_no: data.mobile_no,
				// 			expire_date: data.expire_date,
				// 			cvv: data.cvv,
				// 			Method: 'signSms',
				// 			bank_code: data.bank_code,
				// 			bank_name: data.bank_name,
				// 	},
				// 	success: res1 => {
				// 		console.log(1, res1)
				// 		// 添加银行卡支付
				// 		this.bankPayData = data
				// 		this.bankPayData.mch_order_no = res.data.out_trade_no
				// 		this.$wanlshop.msg('验证码发送成功');
				// 		this.smsCodeShow = true
				// 	},
				// })
				// await
				let data = this.bankData;
				if(!data.bank_code){
					this.$wanlshop.msg('请选择银行');
					return;
				}
				if(!data.bank_card_no){
					this.$wanlshop.msg('请填写银行卡号');
					return;
				}
				if(!data.id_no){
					this.$wanlshop.msg('请填写身份证号');
					return;
				}
				if(!data.payer_name){
					this.$wanlshop.msg('请填写持卡人姓名');
					return;
				}
				if(!data.expire_date && this.typeindex == 1){
					this.$wanlshop.msg('请填写卡有效期');
					return;
				}
				if(this.typeindex == 1)
				{
					if(data.bank_code=='CMB'){
						this.$wanlshop.msg('招商银行信用卡暂不支持');
						return;
					}
				}
				if(!data.cvv && this.typeindex == 1){
					this.$wanlshop.msg('请填写CVV');
					return;
				}
				if (!data.mobile_no) {
					this.$wanlshop.msg('请填写手机号码');
						return false
				}
				// if (!data.captcha) {
				// 	this.$wanlshop.msg('请填写验证码');
				// 		return false
				// }
				
				var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if(!data.mobile_no || !myreg.test(data.mobile_no)){
					this.$wanlshop.msg('请填写正确手机号');
					return;
				}
				uni.request({
					url: '/wanlshop/Joinpay/signSms', 
					method: 'POST',
					data:{
						
						payer_name: data.payer_name,  
						id_no: data.id_no,
						bank_card_no: data.bank_card_no,
						mobile_no: data.mobile_no,
						expire_date: data.expire_date,
						cvv: data.cvv,
						Method: 'signSms',
						bank_code: data.bank_code,
						bank_name: data.bank_name,
					},
					success: res => {
						this.$wanlshop.msg('验证码发送成功');
						this.mch_order_no = res.data.mch_order_no
						this.startTimer();
						},
					// 1.1.8升级
					// complete: res =>{
					// 	if(res.data.code == 4){
					// 		this.$refs.wanlCaptcha.init({event: this.event,mobile: this.bankData.mobile}).then(() => {
					// 			// 验证通过回调
					// 			this.$wanlshop.msg('验证码发送成功');
					// 			this.startTimer();
					// 		}).catch(() => {
					// 			uni.navigateBack({ delta: 1 });
					// 		});
					// 	}
					// }
				});
			},
			startTimer() {
				this.countdown = 60;
				
				if (this.cTimer == null) {
					this.cTimer = setInterval(() => {
						this.countdown--;
						if (this.countdown == 0) {
							this.clearTimer();
						}
					}, 1000)
				}
			},
			clearTimer() {
				clearInterval(this.cTimer);
				this.cTimer = null;
			},
			resend(){
				this.startTimer();
				// this.code = [];
				// this.currentFocus = 0;
				this.countdown = 60;
				this.sendMessage();
			},
		}
	}
</script>

<style>
	.picker .flex image{
		width: 40rpx;
		height: 40rpx;
	}
.cu-form-group .title {
	min-width: 100px;
}
.code {
	color: #fff;
	background-color: #e69f45;
}
</style>